<template>
    <div class="yorha-img-box" ref="con">
        <div class="little-box"></div>
        <div class="little-box"></div>
        <div class="little-box"></div>
        <div class="little-box"></div>
        <div class="contain" ref="contain">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import {getCurrentInstance, onMounted} from "vue";

export default {
    name: "YorhaImageBox",
    props:['width','height'],
    setup(props) {
        let instance = getCurrentInstance()

        onMounted(()=>{
            instance.refs.con.style.width = props.width
            instance.refs.con.style.height = props.height
            instance.refs.contain.style.width = parseInt(props.width) - 6 + 'px'
            instance.refs.contain.style.height = parseInt(props.height) - 6 + 'px'
        })
    }
}
</script>

<style lang="less" scoped>
@import "../../style";
.yorha-img-box {
    display: inline-block;
    position: relative;
    &>.little-box {
        position: absolute;
        width: 3px;
        height: 3px;
        background: @yellow;
        &:nth-child(1) {
            left: 0;
            top: 0;
        }
        &:nth-child(2) {
            right: 0;
            top: 0;
        }
        &:nth-child(3) {
            left: 0;
            bottom: 0;
        }
        &:nth-child(4) {
            right: 0;
            bottom: 0;
        }
    }
    &>.contain {
        position: absolute;
        border: 1px @yellowWhite solid;
        padding: 2px;
        left: 3px;
        top: 3px;
        overflow: hidden;
        box-sizing: border-box;
    }
}
</style>